<template>
  <view class="indexHeader">
    <view class="content">
      <view class="title">
        <view 
          class="titleTab"
          v-for="(tab, index) in titleTabs"
          :key="tab.id"
          :class="{ active: currentIndex === index }"
          @click="switchTitleTab(index)"
        >
          <view :class="['text-box', { highlighted: currentIndex === index }]">
            <span :style="{ color: currentIndex === index ? '#FF5733' : '#333' }">
              {{ tab.title }}
            </span>
          </view>
        </view>
        <view
          class="indicator"
          :style="{ left: indicatorPosition + 'px', width: indicatorWidth + 'px', backgroundColor: indicatorColor }"
        ></view>
      </view>
      
	  <view v-if="currentIndex === 1">
		  <view class="searchBox">
		    <image class="iconfont icon-sousuo"></image>
		    <view class="overlay" @click="handleClick"></view>
		    <input type="text" v-model="searchQuery" placeholder="搜索..." class="search-input" @focus.stop />
		  </view>
		  
		  <view class="recommendNavigationBar">
		    <view 
		      class="navItem" 
		      v-for="(item, index) in navigationItems" 
		      :key="index" 
		      @click="navigateTo(item.type, index)"
		      :class="{ selected: currentRecommendNavIndex === index }"
		    >
		      {{ item.label }}
		    </view>
		  </view>
	   </view>
	  <view v-if="currentIndex === 2">
		   <ranking-list-header-xhd class="rankingListHeader" ></ranking-list-header-xhd>
	  </view> 
    </view>
  </view>
</template>

<script>
export default {
  name: "index-header-xhd",
  props: {
    currentIndex: {
      type: Number,
      required: true
    },
    currentRecommendNavIndex: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      titleTabs: [
        { id: 0, title: "动态" },
        { id: 1, title: "推荐" },
        { id: 2, title: "热榜" }
      ],
      indicatorPosition: 0,
      indicatorWidth: 0,
      indicatorColor: '#FF5733',
      searchQuery: '',
      navigationItems: [
        { label: '关注', type: 'follow' },
        { label: '全部', type: 'all' }
      ]
    };
  },
  methods: {
    switchTitleTab(index) {
     this.$emit('updateIndex', index);
      const query = uni.createSelectorQuery().in(this);
      query.select(`.titleTab:nth-child(${index + 1}) .text-box`).boundingClientRect(rect => {
        if (rect) {
          this.indicatorWidth = rect.width;
          this.indicatorPosition = rect.left;
        }
      }).exec();
    },
    handleClick() {
      //console.log("搜索框被点击，但不能获取焦点");
	  if(uni.getStorageSync('UID')==''||uni.getStorageSync('token')==''){
		uni.navigateTo({
			url:'/pages/login/login'
		}); 
		return
	  }
	  uni.navigateTo({
	  	url:'/pages/search/search'
	  })
    },
    navigateTo(type, index) {
      this.$emit('updateNavIndex', index);
      console.log(`导航到: ${type}`);
    }
  },
  mounted() {
	  
    this.switchTitleTab(this.currentIndex);
  }
}
</script>

<style lang="scss">
.indexHeader {
  padding-top: var(--status-bar-height);
  background-color: #f0f0f0;
  width: 100%;
  position: sticky;
  top: 0;
  margin-bottom: 5rpx;
 // border-bottom: 1rpx solid rgba(0, 0, 0, 0.3);
}

.content {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.title {
  margin-left: 20rpx;
  height: 60rpx;
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  width: 60%;
  position: relative;
}

.titleTab {
  flex: 1;
  cursor: pointer;
  text-align: center;
}

.text-box {
  width: 80rpx;
  font-size: 40rpx;
  line-height: 40rpx;
  padding: 10rpx;
  transition: transform 0.3s ease;
}

.highlighted {
  font-size: 40rpx;
  transform: scale(1.05);
  text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.3);
}

.indicator {
  position: absolute;
  bottom: 3rpx;
  height: 4rpx;
  transition: left 0.3s ease, width 0.3s ease, background-color 0.3s ease;
  background-color: #FF5733;
  border-radius: 2rpx;
  transform: translateX(-20rpx);
}

.searchBox {
  height: 50rpx;
  display: flex;
  align-items: center;
  position: relative;
  width: 90%;
  margin: 15rpx auto 0;
}

.icon-sousuo {
	//background-color: red;
  position: absolute;
  width: 40rpx;
  height: 40rpx;
  left: 10rpx;
  font-size: 40rpx;
}

.search-input {
  flex: 1;
  height: 100%;
  border-radius: 20rpx;
  padding: 5rpx 5rpx 5rpx 50rpx;
  font-size: 30rpx;
  background-color: #fff;
  outline: none;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  z-index: 1;
}

.recommendNavigationBar {
  margin-top: 5rpx;
  margin-bottom: 5rpx;
  margin-left: 10rpx ;
  width: 30%;
  height: 50rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.navItem {
  font-size: 30rpx;
  transition: font-weight 0.3s;
}

.navItem.selected {
  font-weight: bold; /* 修改为加粗 */
}
.rankingListHeader{
	margin-top: 8rpx;
	margin-bottom: 5rpx;
}
</style>



